<template>
    <div>
        <!-- 这里的canvas元素将通过ref在JavaScript中引用 -->
        <canvas ref="myChartCanvas" width="400" height="200"></canvas>
    </div>
</template>

<script>
import { Chart } from 'chart.js/auto';

let myChart = null; // 全局变量，用于保存图表实例
export default {
    name: 'ElecParamsChart',
    methods: {
        handleUpdateChart(labels, data) {
            myChart.data.datasets[0].data = data;
            myChart.data.labels = labels;
            
            // 更新图表
            myChart.update();
        }
    },
    mounted() {
        const myChartCanvas = this.$refs.myChartCanvas;
        const ctx = myChartCanvas.getContext('2d');
        myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['1', '2', '3', '4', '5', '6', '7'],
                datasets: [{
                    label: '电压',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1,
                }],
            },
            options: {
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const value = context.raw; // 获取原始数据值
                                return value + 'V'; // 返回带有单位的值
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        ticks: {
                            callback: function(value) {
                                // 在刻度值后面添加单位
                                return value + 'V';
                            }
                        }
                    }
                }
            }
        });
    }
};
</script>
  
<style scoped>
/* 你可以在这里添加组件的样式 */
</style>